<template>
  <div class="container">
    <div class="nav__container">
      <div class="nav__item" :class="{'nav__item--active': auditStatus === '0'}" @click="selectNav('0')">待审核</div>
      <div class="nav__item" :class="{'nav__item--active': auditStatus === '1'}" @click="selectNav('1')">已通过</div>
      <div class="nav__item" :class="{'nav__item--active': auditStatus === '2'}" @click="selectNav('2')">已拒绝</div>
    </div>
    <ATable :table-title="tableTitle" :table-data="tableData" @operate="operateItem" class="table__contaienr"/>
    <div class="page_box" v-if="totalPage > 1">
      <page-bar :select="forward" :count="totalPage" :current="pageNumber"/>
    </div>
  </div>
</template>

<script>
import {ATable, PageBar} from '@/components';
import Api from '@/api';
import dayjs from 'dayjs';

export default {
  name: 'audit',
  components: {
    ATable,
    PageBar,
  },
  data() {
    return {
      auditStatus: '0', // 0 待审核， 1 已通过， 2未通过
      pageNumber: 1,
      totalPage: 1,
      selectNavName: '待审核',
      tableTitle: ['项目名称', '申请人ID', '已有项目数', '申请时间', '操作'],
      tableData: {
        list: [
          // [
          //   {
          //     value: '天下第一',
          //   },
          //   {
          //     value: '哈哈侠',
          //   },
          //   {
          //     value: '3',
          //   },
          //   {
          //     value: '2018-06-03 12：00',
          //   },
          // ]
        ],
        operate: {
          name: '审核'
        }
      },
      dataList: []
    };
  },
  created() {
    this.getAuditList();
  },
  methods: {
    selectNav(val) {
      this.auditStatus = val;
      this.pageNumber = 1;
      let operate = '审核';
      if (val != 0) {
        operate = '查看详情';
      }
      const { tableData } = this;
      tableData.operate = {
        name: operate
      };
      this.tableData = tableData;
      this.getAuditList();
    },
    getAuditList() {
      const { auditStatus, pageNumber } = this;
      Api.getAuditList({
        auditStatus,
        pageNumber: pageNumber - 1,
        pageSize: 10,
      }).then(res => {
        let tableData = [];
        this.dataList = res.data.projectList;
        this.totalPage = res.data.totalPage;
        if(res.data.projectList.length < 1) return;
        res.data.projectList.forEach(val => {
          val.publishTime = dayjs(val.publishTime).format('YYYY-MM-DD HH:mm:ss');
          let _item = [
            {
              value: val.name,
            },
            {
              value: val.operaterName,
            },
            {
              // value: val.projectCount,
              value: '-',
            },
            {
              value: val.publishTime,
            },
          ]
          
          tableData.push(_item);
        });
        this.tableData.list = tableData;
        console.log(res);
      })
    },
    operateItem(val) {
      const { dataList } = this;
      const item = dataList[val];
      console.log(item)
      // localStorage.setItem('audit', JSON.stringify(item));
      this.$router.push({name: 'auditdetail', params: { type: this.auditStatus, id: item.projectId }});
    },
    forward(pageNo) {
      console.log('pageNo',pageNo);
      this.pageNumber = pageNo;
      this.getAuditList();
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '../styles/audit.styl';
</style>
